<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/elementUI.css">
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/elementUI.js"></script>
</head>
<body>
    <div id="app">
        <el-input
                placeholder="姓名"
                v-model="query.name" style="width: 180px;"
                clearable>
        </el-input>
        <el-input
                placeholder="年龄" type="number" style="width: 180px;"
                v-model="query.age1"
                clearable>
        </el-input>-
        <el-input
                placeholder="年龄" type="number" style="width: 180px;"
                v-model="query.age2"
                clearable>
        </el-input>
        <el-button @click="toAdd">添加</el-button>
        <el-button @click="delAll">批量删除</el-button>
        <el-table
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55"
                   >
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
            <el-table-column label="头像">
                    <template slot-scope="scope">
                        <img :src="scope.row.img" width="50">
                    </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="toEdit(scope.row)">编辑</el-button>
                    <el-button size="mini"type="danger" @click="delOne(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.page"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="2"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageInfo.total">
        </el-pagination>

        <!--添加-->
        <el-dialog :title="mode.title" :visible.sync="dialogFormVisible":before-close="closeForm">
            <el-form :model="form" :rules="rules" ref="ruleForm" >
                <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
                    <el-input v-model="form.age" type="number" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="头像" :label-width="formLabelWidth" prop="img">
                    <el-upload
                            action="/upload/imgupload.action"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :on-success="uploadsuccess"
                            :file-list="fileList"
                            :limit="1">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible" append-to-body>
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</body>
    <script>
        var checkAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('年龄不能为空'));
            }

             if (value < 0 ||value>200) {
                 callback(new Error('请输入正确年龄(0-200)'));
             } else {
                 callback();
             }
        };
        new Vue({
            el:"#app",
            data:{
                tableData:[],
                query:{
                    name:'',
                    age1:'',
                    age2:'',
                    page:1,
                    size:2
                },
                pageInfo:{},
                dialogFormVisible: false,
                form: {
                    name: '',
                    age:'',
                    img:''
                },
                formLabelWidth: '120px',
                dialogImageUrl: '',
                dialogVisible: false,
                multipleSelection: [],
                fileList:[],
                mode:{
                    title:'',
                    url:''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
                    ],
                    img: [
                        { required: true, message: '请上传头像', trigger: 'change'},
                    ],
                    age:[
                        { required: true, message: '请输入年龄', trigger: 'blur' },
                        { validator: checkAge, trigger: 'blur' }
                    ]
                }
            },
            watch:{
                query:{
                    deep:true,
                    handler(){
                        this.initData()
                    }
                }
            },
            methods:{
                delOne(id){
                    this.del(id);
                },
                toEdit(t){
                    this.form=JSON.parse(JSON.stringify(t));
                    this.fileList=[
                        {name: '',url:this.form.img}
                    ]
                    this.dialogFormVisible=true;
                    this.mode={
                        title:'修改教师',
                        url:'/t/edit.action'
                    }
                },
                closeForm(done){
                    this.initForm()
                    done()
                },
                del(id){

                        this.$confirm('确认删除？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            axios.get(`/t/delAll.action?ids=${id}`).then(res=>{
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.initData();
                            })

                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消删除'
                            });
                        });

                }
                ,
                delAll(){
                    if (this.multipleSelection.length>0){
                            let ids=this.multipleSelection.map(t=>t.id);
                            this.del(ids);
                    } else{
                        this.$message({
                            message: '请至少选择一个！',
                            type: 'warning'
                        });}
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                initForm(){
                  this.form={
                      name: '',
                      age:'',
                      img:''
                  }
                  this.fileList=[]
                  this.$refs['ruleForm'].resetFields();
                  this.dialogFormVisible=false;

                },
                add(){
                    this.$refs['ruleForm'].validate((valid) => {
                        if (valid) {
                            axios.post(this.mode.url,this.form).then(res=>{
                                this.initForm();
                                this.initData();
                            })
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });

                },
                uploadsuccess(response, file, fileList){
                    this.form.img=response;
                    this.$refs['ruleForm'].validateField('img')
                },
                handleRemove(file, fileList) {
                    this.form.img=""
                    console.log(file, fileList);
                },
                handlePictureCardPreview(file) {
                    this.dialogImageUrl = file.url;
                    this.dialogVisible = true;
                },
                toAdd(){
                    this.dialogFormVisible=true
                    this.mode={
                        title:'添加教师',
                        url:'/t/add.action'
                    }
                },
                handleSizeChange(val) {
                    this.query.size=val;
                },
                handleCurrentChange(val) {
                    this.query.page=val;
                },
                initData(){
                    axios.post(`/t/findAll.action?page=${this.query.page}&size=${this.query.size}`,this.query).then(res=>{
                        this.tableData=res.data.list;
                        this.pageInfo=res.data;
                        if (this.tableData.length==0&&this.query.page>1){
                            this.query.page--;
                        }
                    })
                }
            },
            created(){
                this.initData()
            }
        })
    </script>
</html>